<#include '/admin/header.html' >
<div class="main">
	<!-- 搜索框 -->
	<div style="display: block;" class="searchAdvanced">
		<table width="98%" border="0" cellspacing="0" cellpadding="8">
			<tr>
				<td width="80">
					按订单周期：
				</td>
				<td width="70" >
					<select id="cycle_type">
						<!-- <option value="0">--请选择--</option> -->
						<option value="1">按照月统计</option>
						<option value="2">按照年统计</option>
					</select>
				</td>
				<td width="70" >
					<select id="year">
						<option value="0">--全年--</option>
					</select>
				</td>
				<td width="70" >
					<select id="month">
						<!-- <option value="0">--请选择--</option> -->
					</select>
				</td>
				
				<td width="200" style="text-align: center;float: right">
					<a id="search_statis" class="button blueButton"  href="javascript:void(0);">开始搜索</a>
				</td>
				<td></td>
		</table>
	</div>
	<div class="clear height10"></div>
	
	<!-- 主体 -->
	<div class="input">
		<div style="display: block;" class="goods_input">
		
			<!-- 用户记录当前的tabId -->
			<input type="hidden" id="now_tab_hid" value="1" />
			
			
			<!-- tab页标题 -->
			<div class="contentTab">
				<ul class="tab">
					
					<li class="contentTabS" tabid="1"> 下单量 </li>
					<li tabid="2"> 下单商品数量 </li>
					<li tabid="3"> 下单金额 </li>
				</ul>
			</div>
			
			<!-- tab页内容 -->
			<div class="shadowBoxWhite wf100 whiteBox">
				<div class="text">
					<div class="tab-page">
						
						<!-- 注意  div中不能有数据  这个用来判断是否加载了数据！！！！！！！！！ -->
						<div class="tab-panel" h_url="${ctx}/shop/admin/memberStatistics/order-num-statistics-html.do" tabid="1"></div>

						<div class="tab-panel" style="display:none;" h_url="${ctx}/shop/admin/memberStatistics/goods-num-statistics-html.do" tabid="2"></div>
						
						<div class="tab-panel" style="display:none;" h_url="${ctx}/shop/admin/memberStatistics/order-price-statistics-html.do" tabid="3"></div>
						
					</div>
				</div>
			</div>
		</div>
	</div>	
	<div class="clear height10"></div>
</div>

<script type="text/javascript">

$(function(){
	
	//初始化下拉菜单中的时间
	var currentYear = new Date().getFullYear();
	var historyYear = currentYear-10;
	var currentmonth = new Date().getMonth();
	currentmonth+=1;
	
	//for循环得到年数
	for(var i=0;i<20;i++){
		
		//选中当前年
		if(currentYear==historyYear){
			$("#year").append("<option value='"+historyYear+"' selected >"+historyYear+"年</option>" );
		}else{
			$("#year").append("<option value='"+historyYear+"' >"+historyYear+"年</option>" );
		}
		historyYear++;
	}
	
	//for循环得到月份
	for(var i=1;i<=12;i++){
		
		// 选中当前月
		if(currentmonth==i){
			$("#month").append("<option value='"+i+"' selected >"+i+"月</option>" );
		}else{
			$("#month").append("<option value='"+i+"' >"+i+"月</option>" );
		}
	}
	
	//默认加载第一个tab页的数据
	loadTab(1)
	
	// 选项卡 单击事件
	$(".goods_input .contentTab>ul>li").click(function() {
		var tabId = $(this).attr("tabid");
		$(".goods_input .contentTab>ul>li").removeClass("contentTabS");
		$(this).addClass("contentTabS");
		$(".tab-page .tab-panel").hide();
		
		$("#now_tab_hid").val(tabId);	//记录当前tabId
		loadTab(tabId);
	});
	
	// 搜索点击事件
	$("#search_statis").click(function(){
		// 1.获取时间条件
		var dateWhere = getDateWhere();
		
		//如果没有时间条件 就不用刷新
		if(!dateWhere) {
			return;
		}
		
		// 2.记录这个页需要刷新
		$(".now_tab_data_hid").val("1");
		var tabId = $("#now_tab_hid").val();
		
		// 3.刷新数据页面
		refreshTab(tabId, dateWhere[0], dateWhere[1]);
		
		// 4.记录这个页不用刷新
		$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
	});
});

/**
 * 获取日期条件
 * @return dateWhere[] 下标0=开始时间  下标1=结束时间
 */
function getDateWhere(){
	
	var c_type = $("#cycle_type").val();
	var startDate, endDate; //开始时间和结束时间
	
	if (c_type == 0) {
		alert("请先选择查询方式!");
		return;
	}
	
	//如果是按照年来筛选订单的
	if(c_type == 2) {
		
		var year = $("#year").val();
		
		if(year == 0) {
			var dateWhere = [];
			dateWhere[0] = "";
			dateWhere[1] = "";
			return dateWhere;
		}
		
		startDate = year + "-01-01 0:0:00";
		endDate = year + "-12-31 23:59:59";
		
	} else {
		
		var year = parseInt($("#year").val());
		var month = parseInt($("#month").val());

		if(year == 0) {
			alert("请选择年份");
			return;
		}
		if(month == 0) {
			alert("请选择月份");
			return;
		}
		
		//得到一个月最后一天
		var lastDate = new Date(year, month, 0);
		var lastDay = lastDate.getDate();
		
		startDate = year + "-" + month + "-01 0:0:00";
		endDate = year + "-" + month + "-" + lastDay + " 23:59:59";
	}
	var dateWhere = [];
	dateWhere[0] = startDate;
	dateWhere[1] = endDate;
	return dateWhere;
}


/**
 * 根据tabId刷新页面数据
 * @param tabId	tab页的id
 * @param startDate	条件：开始时间
 * @param endDate	条件：结束时间
 */
function refreshTab(tabId, startDate, endDate){
	
	tabId = parseInt(tabId);
	//暂时tabId与函数方式定死  也许还有更好的方法
	switch(tabId) {
	
		case 1:
			getOrderNum(startDate, endDate);
			break;
		case 2:
			getGoodsNum(startDate, endDate);
			break;
		case 3:
			getOrderPrice(startDate, endDate);
			break;
		default:
			getOrderNum(startDate, endDate);
				
	}
	
}


/**
 * 根据tabId加载tab页数据 或者 刷新数据
 * @param tabId	tab页的id
 */
function loadTab(tabId){
	var $tab = $(".tab-panel[tabid=" + tabId + "]");
	if($tab.html() == '') {
		$.ajax({
			url : $tab.attr("h_url"),
			type:'get',
			success:function(data){
				$tab.html(data);
			}
		});
	} else {
		var isRefresh = $(".now_tab_data_hid[tab_id='" + tabId + "']").val();
		if (isRefresh == "1") {
			// 1.获取时间条件
			var dateWhere = getDateWhere();
			
			//如果没有时间条件 就不用刷新
			if(!dateWhere) {
				return;
			}
			
			// 2.刷新数据页面
			refreshTab(tabId, dateWhere[0], dateWhere[1]);
			
			// 3.记录这个页不用刷新
			$(".now_tab_data_hid[tab_id='" + tabId + "']").val("0");
		}
	}
	$tab.show();
}

/**
 * 初始化柱状图
 * @param id	html 初始化div的id
 * @param conf	相关配置
 */
function initHistogram(id,conf){

	var options = {
			credits: {
	             //text: 'Javashop',
	             //href: 'http://www.javamall.com.cn'
				enabled:false
	        },
			chart : {
				type : 'column'
			},
			title : {
				text : conf.title
			},
			xAxis : {
				categories : conf.categories
			},
			yAxis : {
				min : 0,
				title : {
					text : conf.yDesc
				}
			},
			plotOptions: {
	            column: {
	                
	                dataLabels: {
	                    enabled: true,
	                    style: {
	                        fontWeight: 'bold'
	                    }
	                }
	            }
	        },
			series : conf.series
		};
	$("#" + id).highcharts(options);
};
</script>

<#include '/admin/footer.html' >